<template>
	<view>
		<view class="centre-top row align-items-center">
			<image src="/static/login/logo@2x.png" mode="widthFix"></image>
		</view>
		<view :style="`top:${heightTop}px`" style="position: fixed;right: 30rpx;" @click="getPhone">
			<zywork-icon type="icon-kefu" color="#ffffff" size="50"></zywork-icon>
		</view>
		<view v-if="isAndroid" class="container">
			<view class="row align-items-center">
				<text v-show="!isPwd" class="text-lg">验证码登录</text>
				<text v-show="isPwd" class="text-lg">密码登录</text>
			</view>
			<view class="row input-phone" style="">
				<zywork-icon type="icon-shouji" size="40" color="#919191"></zywork-icon>
				<text class="text-base" style="margin-left: 15rpx;">+86</text>
				<input style="margin-left: 15rpx;" placeholder="请输入手机号" type="number" v-model="phone"
					pattern="[0-9]*" />
			</view>

			<view v-show="!isPwd" class="row input-phone" style="">
				<zywork-icon type="icon-yuechi" size="40" color="#919191"></zywork-icon>
				<input style="margin-left: 15rpx;width: 250rpx;" placeholder="请输入验证码" type="number" v-model="code"
					pattern="[0-9]*" />
				<text class="text-base " :class="getCodeDisabled?'font-color1':'font-color'" style="margin-left: auto;"
					@click="getCode">{{getCodeText}}</text>
			</view>
			<view v-show="isPwd" class="row input-phone" style="">
				<zywork-icon type="icon-mima" size="40" color="#919191"></zywork-icon>
				<input style="margin-left: 15rpx;" :password="isCheckPwd" v-model="password" placeholder="请输入密码"
					value="" />
				<zywork-icon @click="checkPwd" style="margin-left: auto;" :type="isCheckPwd?'icon-biyan1':'icon-chakan'"
					size="30" color="#919191"></zywork-icon>
			</view>
			<view v-show="!isPwd" class="row input-phone" style="">
				<zywork-icon type="icon-yaoqing" size="40" color="#919191"></zywork-icon>
				<input style="margin-left: 15rpx;width: 300rpx;" placeholder="邀请码" v-model="invitationCode" />
			</view>
			<view class="row" style="padding: 20rpx 0rpx;flex: 1;">
				<text v-show="!isPwd" class="text-base font-color" @click="pwdLogin">密码登录</text>
				<text v-show="isPwd" class="text-base font-color" @click="pwdLogin">验证码登录</text>
				<!-- <text v-show="isPwd" class="text-base font-color1" style="margin-left: auto;" @click="retrievePassword">忘记密码?</text> -->
			</view>
			<view class="login-button text-base" style="font-weight: 800;" @click="logins">
				登录
			</view>
			<!-- <view class="row" style="margin-top: 30rpx;">
				<text class="font-color1" style="margin-left: auto;">还没有账号?</text>
				<text class="font-color">立即注册</text>
			</view> -->
			<!-- #ifdef APP-PLUS -->
			<view class="font-color1" style="text-align: center;flex: 1;margin-top: 120rpx;">
				——其他登录方式——
			</view>
			<view class="row align-items-center" style="padding: 15rpx 0rpx;">
				<zywork-icon @click="thirdPartyLogin(1)" type="icon-weixinzhifu" size="120" color="#07BB0A">
				</zywork-icon>
			</view>
			<!-- #endif -->
			<view @click="dis = !dis" class="row align-items-center" style="margin-top: 100rpx;">
				<checkbox value="cb" :checked="dis" color="#6BA9D7" style="transform:scale(0.8);" />
				<text class="font-color1">登录注册代表同意</text>
				<text class="font-color"
					@click.stop="navTo('/pages/common/common?weburl=https://yunzhuan.zgwlkj.cn/')">服务协议</text>
				<text class="font-color1">和</text>
				<text class="font-color" @click.stop="navTo(policyPath)">隐私协议</text>
			</view>
		</view>
		<view v-else class="container">
			<view class="row align-items-center">
				<text v-show="!isPwd&&!isRegister" class="text-lg">验证码登录</text>
				<text v-show="!isPwd&&isRegister" class="text-lg">注册账号</text>
				<text v-show="isPwd" class="text-lg">密码登录</text>
			</view>
			<view class="row input-phone" style="">
				<zywork-icon type="icon-shouji" size="40" color="#919191"></zywork-icon>
				<text class="text-base" style="margin-left: 15rpx;">+86</text>
				<input style="margin-left: 15rpx;" placeholder="请输入手机号" type="number" v-model="phone"
					pattern="[0-9]*" />
			</view>

			<view v-show="!isPwd" class="row input-phone" style="">
				<zywork-icon type="icon-yuechi" size="40" color="#919191"></zywork-icon>
				<input style="margin-left: 15rpx;width: 250rpx;" placeholder="请输入验证码" type="number" v-model="code"
					pattern="[0-9]*" />
				<text class="text-base " :class="getCodeDisabled?'font-color1':'font-color'" style="margin-left: auto;"
					@click="getCode">{{getCodeText}}</text>
			</view>
			<view v-show="isPwd" class="row input-phone" style="">
				<zywork-icon type="icon-mima" size="40" color="#919191"></zywork-icon>
				<input style="margin-left: 15rpx;" :password="isCheckPwd" v-model="password" placeholder="请输入密码"
					value="" />
				<zywork-icon @click="checkPwd" style="margin-left: auto;" :type="isCheckPwd?'icon-biyan1':'icon-chakan'"
					size="30" color="#919191"></zywork-icon>
			</view>
			<view v-show="isRegister" class="row input-phone" style="">
				<zywork-icon type="icon-yaoqing" size="40" color="#919191"></zywork-icon>
				<input style="margin-left: 15rpx;width: 300rpx;" placeholder="邀请码" v-model="invitationCode" />
			</view>
			<view class="row" style="padding: 20rpx 0rpx;flex: 1;">
				<text v-show="!isPwd" class="text-base font-color" @click="pwdLogin">密码登录</text>
				<text v-show="isPwd" class="text-base font-color" @click="pwdLogin">验证码登录</text>
				<!-- <text v-show="isPwd" class="text-base font-color1" style="margin-left: auto;" @click="retrievePassword">忘记密码?</text> -->
			</view>
			<view class="login-button text-base" style="font-weight: 800;" @click="logins">
				登录
			</view>
			<view class="login-button text-base" style="font-weight: 800;background-color: #ffaa00;"
				@click="anonymityLogins">
				游客登录
			</view>
			<view v-if="!isAndroid&&!isRegister" class="row" style="margin-top: 30rpx;">
				<text class="font-color1" style="margin-left: auto;">还没有账号?</text>
				<text class="font-color" @click="isRegister=true">立即注册</text>
			</view>
			<view v-if="!isAndroid&&isRegister" class="row" style="margin-top: 30rpx;">
				<text class="font-color1" style="margin-left: auto;">已有账号?</text>
				<text class="font-color" @click="isRegister=false">立即登录</text>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="font-color1" style="text-align: center;flex: 1;margin-top: 60rpx;">
				——其他登录方式——
			</view>
			<view class="row align-items-center" style="padding: 15rpx 0rpx;">
				<view v-if="!isAndroid&&system>='13'" @click="thirdPartyLogin(0)" class="apple row align-items-center">
					<zywork-icon type="icon-apple" size="80" color="#000"></zywork-icon>
				</view>
				<zywork-icon @click="thirdPartyLogin(1)" type="icon-weixinzhifu" size="120" color="#07BB0A">
				</zywork-icon>
			</view>
			<!-- #endif -->
			<view @click="dis = !dis" class="row align-items-center" style="margin-top: 100rpx;">
				<checkbox value="cb" :checked="dis" color="#6BA9D7" style="transform:scale(0.8);" />
				<text class="font-color1">登录注册代表同意</text>
				<text class="font-color"
					@click.stop="navTo('/pages/common/common?weburl=https://yunzhuan.zgwlkj.cn/%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE-ios.html')">服务协议</text>
				<text class="font-color1">和</text>
				<text class="font-color" @click.stop="navTo(policyPath)">隐私协议</text>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warning" title="客服电话" :buttonArr="['取消','拨打']" :content="phoneNumber"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<popup v-if="!isShow" ref="mapState" protocolPath='/pages/common/common?weburl=https://yunzhuan.zgwlkj.cn/'
			:policyPath="policyPath" @popupState="popupState"></popup>
		<uni-popup ref="hint" type="center" :maskClick="false">
			<view class="column align-items-center"
				style="width: 600rpx;padding: 20rpx 20rpx;background-color: #FFFFFF;border-radius: 20rpx;">
				<view class="text-view" style="font-size: 36rpx;">
					温馨提示
				</view>
				<view class="text-view" style="font-size: 28rpx;color: #868686;">
					请同意并接受用户隐私政策后,再开始使用云赚的服务
				</view>
				<view class="button2" @click="close()" style="">
					重新阅读
				</view>
				<view class="button1" hover-class="button-press" @click="quit" style="">
					退出
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import popup from '@/components/DuDu-popup/DuDu-popup.vue'
	export default {
		components: {
			popup
		},
		data() {
			return {
				heightTop: 10,
				getCodeText: "获取验证码",
				getCodeDisabled: false,
				dis: false,
				isPwd: false,
				isCheckPwd: true,
				phone: "",
				phoneNumber: "",
				code: "", //验证码
				password: "",
				invitationCode: "", //邀请码
				isShow: true,
				system: '', // 系统版本
				platform: '', // 平台
				isAndroid: true,
				isRegister: false,
				policyPath: "/pages/common/common?weburl=https://www.zgwlkj.cn/yunzhuan/%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.html"
			};
		},
		onLoad(data) {
			if (data.rcode) {
				this.invitationCode = data.rcode
			}

			this.isAndroid = getApp().globalData.isAndroid;
			uni.getSystemInfo({
				success: (res) => {
					this.system = res.system
					if (res.platform === 'ios') {
						this.policyPath = "/pages/common/common?weburl=https://yunzhuan.zgwlkj.cn/apple"
					}
					console.log("系统信息", this.system)
				},
				fail: (err) => {},
				complete: () => {}
			})
		},
		created() {
			this.heightTop += uni.getSystemInfoSync().statusBarHeight
			this.phoneNumber = this.$util.PHONE_NUMBER;
			uni.hideLoading()
		},
		onShow() {
			// #ifdef APP-PLUS
			uni.hideLoading()
			if (uni.getStorageSync(this.$util.HAS_USER_INFO)) {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
			uni.getClipboardData({
				success: res=> {
					if(res.data.indexOf("rcode") != -1&&res.data.indexOf("http") == -1){
						let data = JSON.parse(res.data);
						this.invitationCode = data.rcode
					}
				},
				fail: function(err) {
					
				}
			})
			this.iosStatus = uni.getStorageSync("iosStatus")
			// #endif
		},
		methods: {
			thirdPartyLogin(type) {
				// #ifdef APP-PLUS
				this.isShow = plus.runtime.isAgreePrivacy()
				if (!this.isShow) {
					return
				}
				// #endif
				if (this.dis === '' || this.dis !== true) {
					uni.showToast({
						title: "请勾选用户注册协议",
						icon: "none"
					})
					return
				}
				if (this.loginStatus) {
					return
				}
				if (type === 0) {
					this.appleLogin()
				} else {
					this.wxLogin();
				}
			},
			appleLogin() {
				// 判断是 iOS13版本
				uni.login({
					provider: 'apple',
					success: (loginRes) => {
						uni.showLoading({
							title: '登陆中'
						})
						this.loginStatus = true
						uni.getUserInfo({
							provider: 'apple',
							success: (userInfoRes) => {
								console.log("苹果登录返回信息", userInfoRes)
								userInfoRes.userInfo.familyName = userInfoRes.userInfo.fullName
									.familyName
								userInfoRes.userInfo.giveName = userInfoRes.userInfo.fullName
									.giveName
								userInfoRes.userInfo.token = userInfoRes.userInfo.identityToken
								this.$util.doPostJson('/user/appleLogin',
									userInfoRes.userInfo, {}, false).then(userRes => {
									console.log("苹果登录", userRes)
									if (userRes.data.code == this.$ResponseStatus.OK) {
										uni.setStorageSync(this.$util.USER_TOKEN_KEY,
											userRes.data.data)
										uni.setStorageSync(this.$util.HAS_USER_INFO, true)
										this.queryLable()
									}
								}).catch(error => {
									uni.hideLoading()
									console.log(error)
								})
							},
							fail: (err) => {
								uni.hideLoading()
							}
						})
					},
					fail: (err) => {
						uni.hideLoading()
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			wxLogin() {

				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (~res.provider.indexOf('weixin')) {
							uni.showLoading({
								title: '登陆中'
							})
							this.loginStatus = true
							uni.login({
								provider: 'weixin',
								success: (loginRes) => {
									if (loginRes.errMsg === 'login:ok') {
										let authResult = loginRes.authResult
										uni.getUserInfo({
											lang: "zh_CN",
											success: (infoRes) => {
												let userInfo = infoRes.userInfo
												console.log(userInfo)
												let data = {
													nickname: userInfo.nickName,
													wxHeadimgurl: userInfo
														.avatarUrl,
													wxCountry: userInfo.country,
													wxOpenid: userInfo.openId,
													wxProvince: userInfo.province,
													wxCity: userInfo.city,
													wxSex: userInfo.gender
												}
												if (!this.isAndroid) {
													data.model = "ios"
												}
												console.log("苹果微信登录", data.model)
												this.$util.doPostJson('/user/wxlogin',
													data, {}, false).then(
													userRes => {
														console.log("微信登录",
															userRes)
														if (userRes.data.code ==
															this.$ResponseStatus.OK
															) {
															uni.hideLoading()
															if (userRes.data
																.data == '-1') {
																this.navTo(
																	`/pages/login/binding-phone/binding-phone?openId=${userInfo.openId}`
																	)
															} else {
																// uni.setStorageSync(this.$util.USER_OPENID,userInfo.openId)
																uni.setStorageSync(
																	this.$util
																	.USER_TOKEN_KEY,
																	userRes
																	.data.data)
																uni.setStorageSync(
																	this.$util
																	.HAS_USER_INFO,
																	true)
																this.queryLable()
															}
														} else {
															this.loginStatus =
																false
														}
													}).catch(error => {
													uni.hideLoading()
													this.loginStatus = false
													console.log(error)
												})
											},
											fail: () => {
												this.$util.showInfoToast('获取微信用户信息失败')
												this.loginStatus = false
											}
										})
									}
								},
								fail: (error) => {
									uni.hideLoading()
									this.loginStatus = false
									console.log(error)
								}
							});
						}
					},
					fail: (err) => {
						uni.hideLoading()
						this.loginStatus = false
						console.log(err)
					}
				})
			},
			getPhone() {
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('拨打电话')
				// #ifdef APP-PLUS
				this.isShow = plus.runtime.isAgreePrivacy()
				if (!this.isShow) {
					return
				}
				// #endif

				uni.makePhoneCall({
					phoneNumber: this.phoneNumber.replace(/\s+/g, "-")
				});
			},
			dialogClose() {},
			pwdLogin() {
				this.isPwd = this.isPwd ? false : true;
				this.isRegister = false
			},
			checkPwd() {
				this.isCheckPwd = this.isCheckPwd ? false : true;
			},
			retrievePassword() {
				uni.navigateTo({
					url: "/pages/login/retrieve-password"
				})
			},
			queryLable() {
				this.$util.doGet("/label/userOneLabelList", {}, {}, true).then(res => {
					console.log("查询标签", res.data)
					if (res.data.code == this.$ResponseStatus.OK) {
						if (res.data.rows.length == 0) {
							uni.hideLoading()
							this.loginStatus = false
							uni.reLaunch({
								url: "/pages/index/interest/interest"
							})
						} else {
							setTimeout(() => {
								uni.hideLoading()
								uni.switchTab({
									url: "/pages/index/index"
								})
								this.loginStatus = false
							}, 1000)
						}
					}
				}).catch(error => {
					uni.hideLoading()
					uni.reLaunch({
						url: "/pages/login/login"
					})
					console.log(error)
				})
			},
			popupState(e) { //e->false取消 true确认
				let that = this
				if (e) {
					plus.device.getInfo({
						success: function(e) {
							console.log('getDeviceInfo success: ' + JSON.stringify(e));
							plus.runtime.agreePrivacy();
						},
						fail: function(e) {
							plus.runtime.disagreePrivacy();
							that.$refs.hint.close()
							that.isShow = false
							//动态授权获取设备信息权限
							plus.device.getOAID({
								success: e => {
									console.log('getDeviceInfo success: ' + JSON.stringify(e));
									plus.runtime.agreePrivacy();
								},
								fail: errs => {
									plus.runtime.disagreePrivacy();
									that.$refs.hint.close()
									that.isShow = false
								}
							})
						}
					});

				} else {
					plus.runtime.disagreePrivacy();
					this.isShow = true
					this.$refs.hint.open()
					this.$forceUpdate()
				}
			},
			close() {
				this.$refs.hint.close()
				this.isShow = false
			},
			quit() {
				this.$refs.hint.close()
			},
			anonymityLogins() {
				// #ifdef APP-PLUS
				this.isShow = plus.runtime.isAgreePrivacy()
				// #endif
				if (!this.isShow) {
					return
				}
				if (this.dis === '' || this.dis !== true) {
					uni.showToast({
						title: "请勾选用户注册协议",
						icon: "none"
					})
					return
				}
				uni.setStorageSync(this.$util.HAS_USER_INFO, false)
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			logins() {
				// #ifdef APP-PLUS
				this.isShow = plus.runtime.isAgreePrivacy()
				// #endif
				if (!this.isShow) {
					return
				}
				if (this.loginStatus) {
					return
				}
				if (this.dis === '' || this.dis !== true) {
					uni.showToast({
						title: "请勾选用户注册协议",
						icon: "none"
					})
					return
				}
				if (!this.$util.isPhone(this.phone)) {
					this.$util.showInfoToast('请输入正确的手机号')
					return
				}
				if (!this.code && !this.isPwd) {
					this.$util.showInfoToast('请输入验证码')
					return
				}
				let from = {
					phonenumber: this.phone,
					code: this.code,
					inviteeCode: this.invitationCode
				}
				let url = "/user/codeLogin"
				if (this.isPwd) {
					url = "/user/passlogin"
					if (!this.password) {
						this.$util.showInfoToast('请输入密码')
						return
					}
					from = {
						phonenumber: this.phone,
						password: this.password
					}
				}
				this.loginStatus = true;
				this.$util.doPostJson(url, from, {}, false).then(res => {
					console.log(res.data)
					if (res.data.code == this.$ResponseStatus.OK) {
						console.log("手机号登录", res.data)
						uni.setStorageSync(this.$util.USER_TOKEN_KEY, res.data.data)
						uni.setStorageSync(this.$util.HAS_USER_INFO, true)
						this.$forceUpdate()
						// #ifdef APP-PLUS
						this.queryLable()
						// #endif
						// #ifdef H5
						uni.navigateTo({
							url: "/pages/index/download"
						})
						// #endif
					} else {
						this.loginStatus = false
					}
				}).catch(error => {
					this.loginStatus = false;
					console.log(error)
				})
			},
			getCode() {
				// #ifdef APP-PLUS
				this.isShow = plus.runtime.isAgreePrivacy()
				if (!this.isShow) {
					return
				}
				// #endif
				if (this.getCodeDisabled) {
					return
				}
				if (!this.$util.isPhone(this.phone)) {
					this.$util.showInfoToast('请输入正确的手机号')
					return
				}
				this.getCodeDisabled = true

				let self = this
				let time = 60

				this.$util.doPostForm('/loginApi/SendSMS', {
					phoneNumber: this.phone
				}, {}, false).then(res => {
					if (res.data.code == this.$ResponseStatus.ERROR) {
						this.getCodeDisabled = false
					} else {
						let set = setInterval(function() {
							self.getCodeText = '(' + --time + ')秒后重新获取'
						}, 1000);
						setTimeout(function() {
							self.getCodeDisabled = false;
							self.getCodeText = '获取验证码'
							clearInterval(set)
						}, time * 1000)
					}

				}).catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F5FB;
	}

	.apple {
		width: 120rpx;
		height: 120rpx;
		border: solid 1rpx #c2c2c2;
		border-radius: 50%;
		margin: 0rpx 50rpx;
	}

	.centre-top {
		width: 100%;
		height: 420rpx;
		position: relative;
		z-index: -1;
		overflow: hidden;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.centre-top:after {
		content: '';
		width: 120%;
		height: 420rpx;
		position: absolute;
		left: -10%;
		top: 0;
		z-index: -1;
		border-radius: 0 0 60% 60%;
		background: $index-bg-top;
	}

	.font-color {
		color: #6BA9D7;
	}

	.font-color1 {
		color: #919191;
	}

	.container {
		position: absolute;
		width: 650rpx;
		top: 300rpx;
		left: 50%;
		transform: translate(-50%, 0%);
		padding: 30rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;

		.input-phone {
			padding: 30rpx 20rpx;
			// border-bottom: solid 1rpx #eeeeee;
			align-items: center;
			margin-top: 26rpx;
			background-color: #F9F9F9;
			border-radius: 10rpx;
		}

		.login-button {
			flex: 1;
			background-color: #33aeff;
			color: #ffffff;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 50rpx;
			margin-top: 50rpx;
		}

	}

	.text-lg {
		font-size: 48rpx;
	}

	.text-base {
		font-size: 34rpx;
	}

	.button1 {
		width: 560rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #828282;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 15rpx;
	}

	.button2 {
		width: 560rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: #08ACEE;
		border-radius: 15rpx;
	}

	.button-press {
		background-color: #d6d6d6;
	}

	.text-view {
		text-align: center;
		padding: 20rpx 20rpx;
	}
</style>
